import React from 'react';
import { useAntdTable } from 'ahooks';
import { PaginatedParams } from 'ahooks/lib/useAntdTable';
import useRouter from 'hooks/use-router';
import { ReloadOutlined } from '@ant-design/icons';
import { Typography, Form, Input, Button, Table } from 'antd';
import EditableInput from 'components/EditableInput/index';
import './index.less';
import { deviceList, deviceUpdate, DEVICE_UPDATE_PARAMS } from 'apis/monitor';
import { API_STATUS_CODE } from 'common/constants';

interface FORM {
    userRemark: string;
}

interface DEVICE_ITEM {
    id: string;
    deviceId: string;
    userRemark: string;
    deviceModel: string;
    status: string;
    version: number;
}

interface DEVICE_LIST {
    list: DEVICE_ITEM[];
}

export default () => {
    const router = useRouter();
    const [form] = Form.useForm();
    const columns = [
        {
            title: '设备ID',
            dataIndex: 'deviceId',
        },
        {
            title: '用户备注',
            render: (row: any) => (
                <EditableInput
                    key={row.id}
                    value={row.userRemark}
                    onConfirm={(value: string) => updateUserRemark({ deviceId: row.deviceId, userRemark: value })}
                ></EditableInput>
            ),
            width: 200
        },
        {
            title: '设备型号',
            dataIndex: 'deviceModel',
        },
        {
            title: '是否在线',
            render: (row: any) =>
                row.status === 'online' ? <span className="green">在线</span> : <span className="red">离线</span>,
        },
        {
            title: '版本号',
            dataIndex: 'version',
        },
        {
            title: '远程控制',
            width: 300,
            render: (row: any) => {
                const disabled = row.status === 'offline';
                return (
                    <div>
                        <Button
                            type="link"
                            onClick={() => router.push({ pathname: '/realTime', state: { ...row } })}
                        >
                            接入
                        </Button>
                        <Button type="link" disabled>
                            升级
                        </Button>
                        <Button type="link" disabled>
                            重启
                        </Button>
                        <Button type="link" disabled>
                            关机
                        </Button>
                    </div>
                );
            },
        },
    ];
    const getTableData = ({ current, pageSize }: PaginatedParams[0], formData: FORM): Promise<DEVICE_LIST> => {
        const query = {
            ...formData,
            current,
            pageSize,
        };
        return Promise.resolve(deviceList(query).then((res) => ({ list: res.data })));
    };
    const { tableProps, search } = useAntdTable(getTableData, {
        defaultPageSize: 10,
        form,
    });
    const { submit, reset } = search;

    const updateUserRemark = async (params: DEVICE_UPDATE_PARAMS) => {
        await deviceUpdate(params);
        reset()
    };

    const searchForm = (
        <div className="mb20">
            <Form form={form} layout="inline">
                <Form.Item name="userRemark">
                    <Input placeholder="请输入用户名" allowClear />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" onClick={submit}>
                        搜索用户
                    </Button>
                </Form.Item>
                <Form.Item>
                    <Button icon={<ReloadOutlined />} onClick={submit}>
                        刷新
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
    return (
        <div className="monitor">
            <Typography.Title level={3}>教育机器人</Typography.Title>
            {searchForm}
            <Table columns={columns} rowKey="id" {...tableProps} />
        </div>
    );
};
